<template>
  <el-card style="margin-bottom: 16px">
    <div slot="header">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-badge :value="total">
            <span>{{title}}</span>
          </el-badge>
        </el-col>
        <!--suppress HtmlDeprecatedAttribute -->
        <el-col :span="6" :offset="11" align="right">
          <el-input v-model="search" size="mini"/>
        </el-col>
        <!--suppress HtmlDeprecatedAttribute -->
        <el-col :span="1" align="right">
          <el-button type="text" icon="el-icon-search" size="mini"/>
        </el-col>
      </el-row>
    </div>
    <el-scrollbar style="height: 200px" v-loading="queryLoading">
      <to-do-item v-for="(item, index) in list" :key="index"
                  :time="item[time]" :content="item[content]" :point-color="item[color]"/>
    </el-scrollbar>
    <el-pagination class="pagination" @size-change="handleSizeChange" @current-change='handleCurrentChange'
                   :page-size.sync='size' :total.sync="total" :current-page.sync="page" background
                   :disabled="paginationDisabled" style="text-align: center; margin-top: 10px;"
                   layout="sizes, total, jumper, prev, pager, next"/>
  </el-card>
</template>

<script>
import ToDoItem from '@pages/home/part/home/ToDoItem'
import { queryNoConsumeByPageWrapper } from '@/api/ApiMessage'
import PageDTO from '@/api/entity/PageDTO'
import MessageQueryDTO from '@/api/entity/MessageQueryDTO'
import { ResultCode } from '@/constants/constants'
import { formatTime } from '@/utils/ConvertData'
export default {
  name: 'EventToDoCard',
  props: {
    time: {
      required: false,
      type: String,
      default: 'time'
    },
    content: {
      required: false,
      type: String,
      default: 'content'
    },
    color: {
      required: false,
      type: String,
      default: 'content'
    },
    title: {
      required: false,
      type: String,
      default: ''
    }
  },
  components: { ToDoItem },
  data () {
    return {
      search: '',
      dataList: [],
      total: 0,
      size: 10,
      page: 1,
      queryLoading: false
    }
  },
  computed: {
    list () {
      const list = []
      this.dataList.forEach(item => {
        list.push({
          time: formatTime(item.createTime),
          content: item['messageTitle'],
          color: 'yellow',
          page: item['messageUrl']
        })
      })
      return list
    },
    paginationDisabled () {
      return this.queryLoading
    }
  },
  methods: {
    freshData () {
      this.queryLoading = true
      const pageDTO = PageDTO.instance()
      const wrapper = MessageQueryDTO.instance()
      pageDTO.setSize(this.size)
      pageDTO.setCurrent(this.page)
      pageDTO.setCondition(wrapper)
      queryNoConsumeByPageWrapper(pageDTO, data => {
        if (data && data.code === ResultCode.OK) {
          data = data.object
          this.total = data.total
          this.dataList = data.records
        }
      }, () => {
        this.queryLoading = false
      })
    },
    handleSizeChange () {
      this.freshData()
    },
    handleCurrentChange () {
      this.freshData()
    }
  },
  mounted () {
    this.freshData()
  }
}
</script>

<style>
  /*noinspection CssUnusedSymbol*/
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  /*noinspection CssUnusedSymbol*/
  .el-scrollbar__thumb{
    display: none;
  }
</style>
